<template>
	<div class='slider-wrapper' ref='sliderWrapper'>
    <slot></slot>
    <div class='dots' ref='dots'>
      <div class='dot' v-for='(item, num) in dot' :class='{"active": num === index - 1}'></div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll';

export default {
  name: 'slider',
  data() {
    return {
      timer: null,
      index: 0,
      dot: [],
    };
  },
  props: {
    sliderList: {
      type: Array,
      default: [],
      required: true,
    },
    loop: {
      type: Boolean,
      default: true,
    },
    autoPlay: {
      type: Boolean,
      default: true,
    },
    speed: {
      type: Number,
      default: 2000,
    },
  },
  methods: {
    _initScroll() {
      // 宽度
      const slider = this.$refs.sliderWrapper;
      const oUl = slider.children[0];
      const oLi = oUl.getElementsByTagName('li');
      let width = 0;
      for (let i = 0; i < oLi.length; i++) {
        oLi[i].style.width = slider.offsetWidth + 'px';
        width += slider.offsetWidth;
      }
      if (this.loop) {
        width += slider.offsetWidth * 2;
      }
      oUl.style.width = width + 'px';
      if (this.scroll) {
        this.scroll.refresh();
        return;
      }
      this.scroll = new BScroll(slider, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: true,
        snapLoop: this.loop,
        snapThreshold: 0.3,
        snapSpeed: 400,
        click: true,
      });
    },
    _autoPlay() {
      this.index = this.scroll.getCurrentPage().pageX;
      this.timer = setTimeout(() => {
        this.scroll.goToPage(this.index + 1, 0, 400);
      }, this.speed);
    },
    _initDots() {
      this.dot = new Array(this.sliderList.length);
    },
    _bindEvent() {
      window.addEventListener('resize', () => {
        this._initScroll();
      });
      this.scroll.on('scrollEnd', () => {
        if (this.autoPlay) {
          this._autoPlay();
        }
      });
      this.scroll.on('beforeScrollStart', () => {
        if (this.autoPlay) {
          clearTimeout(this.timer);
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this._initDots();
      this._initScroll();
      this._bindEvent();
      if (this.autoPlay) {
        this._autoPlay();
      }
    });
  },
};
</script>
<style lang='stylus' scoped>
@import "~styl/var"
.slider-wrapper
  position relative
  width 100%
  overflow hidden
  ul
    list-style-type none
    white-space nowrap
    li
      display inline-block
      a
        display block
      img
        display inline-block
        width 100%
  .dots
    text-align center
    position absolute
    left 0
    right 0
    bottom 12px
    .dot
      transition width .4s
      transform-origin center center
      display inline-block
      width 8px
      height 8px
      border-radius 50%
      background $color-text-l
      margin 0 4px
      &.active
        width 20px
        border-radius 5px
        background: $color-text-ll
</style>
